<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TitleStyledComp</title>
</head>
<style>
    #{
        margin: 0;
        padding: 0;
    }

    #root{
        width: 300px;

        height: 300px;
        background: coral;
        margin: 0 auto;
        transform: translateY(50%);
    }

    #outer{
        width: 200px;

        height: 200px;
        background: beige;
        margin: 0 auto;
        transform: translateY(10%);
    }

    #inner{
        width: 100px;

        height: 100px;
        background: chartreuse;
        margin: 0 auto;
        transform: translateY(10%);
    }
</style>
<body>


<div id="root">
    root
    <div id="outer">
        outer
        <div id="inner">
            inner
        </div>
    </div>
</div>
</body>
<script>
    //事件的触发是由window->document->body->root->outer->inner 触发事件的捕获
    //然后inner从里到外触发事件的冒泡
    //事件委托:给容器注册事件,容器内子元素的事件触发会冒泡到容器,根据target即可判断是什么元素
    let root = document.getElementById('root');
    let inner = document.querySelector('#inner')
    root.addEventListener('click', (e) => {
        console.log(e.target == inner,'root');

        if(e.target === inner){
            inner.style.backgroundColor = 'red';
        }
    })
</script>
</html>